<template>
  <div>
    <right-title subTitle="废弃油脂销售"></right-title>

    <div id="chart2"
         class="chart-view"
         ref="chart2">

    </div>
  </div>
</template>

<script>
import { apiGetOilPoolCurrentSituationList } from '@/api/api'
let chart = null;
import * as echarts from 'echarts'
import RightTitle from '@/components/RightTitle.vue'
export default {
  components: { RightTitle },
  data () {
    return {
      month: 1,
      dataList: []
    }
  },
  mounted () {
    let date = new Date();
    this.month = date.getMonth() + 1;

    this.getData();
    this.initChart();
  },
  beforeDestroy () {
    if (chart) {
      chart.clear();
    }
  },
  destroyed () {
    if (chart) {
      chart.dispose();
    }
  },
  methods: {
    getData(){
      //销量
      apiGetOilPoolCurrentSituationList().then((res)=>{
        if(res.code == 1){
          this.dataList = res.data;
        }
         
      }).finally(()=>{
         this.initChart();
      })
    },
    initChart () {
      let colorArr = ['#19ecff', '#ffa700', '#cbdaff']
      let xAxisData = Object.keys(this.dataList);
      let yData = Object.values(this.dataList);
      let maxValue = 0;
      yData.forEach((item)=>{
        let val = parseFloat(item);
        if(val > maxValue){
          maxValue = val;
        }
      })

      if(maxValue <1){
        maxValue = 100; 
      } 

      //最大
      let maxDataList = [];
      xAxisData.forEach((item)=>{
        maxDataList.push(maxValue);
      })

      //当天
      let currentDataList = [];
      xAxisData.forEach((item,index)=>{
        if(index == xAxisData.length -1){
          currentDataList.push({
            value:yData[index-1],
              itemStyle: {
                  // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
                  // 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 0,
                    color: '#F3B600' //指0%处的颜色
                  }, {
                    offset: 1,
                    color: '#71D300' //指100%处的颜色
                  }])
                }
          });
        }
        else {
          currentDataList.push(0)
        }
      })

      //其他天
      if(yData.length > 0){
        yData[yData.length -1] = 0
      }

      let _this = this;
      const initOptions = {
        // 坐标轴位置
        grid: {
          top: '12%',
          left: '5%',
          right: '30',
          bottom: '2%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',

          // 添加 $ 前缀
          valueFormatter: (value) => {
            return value + '吨'
          },
          // 提示框浮层内容格式器: 自定义提示框样式
          formatter: function (params) { // params 是 formatter 需要的数据集
            // console.log('params', params)
            let content = "";

            //0 最大值 1 其他月份  2 当前值
            if (params[0].axisValue == _this.month) {
              content += `<div style="height: 25px; line-height: 25px;">
                      <!-- 圆点样式 -->
                      <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${params[2].color};"></span>
                      <span style="color: #424864;">${params[2].seriesName}:</span>
                      <span style="color: #172045;">${params[2].value} 吨</span>
                    </div>`;
            }
            else {
              content += `<div style="height: 25px; line-height: 25px;">
                      <!-- 圆点样式 -->
                      <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${params[1].color};"></span>
                      <span style="color: #424864;">${params[1].seriesName}:</span>
                      <span style="color: #172045;">${params[1].value} 吨</span>
                    </div>`;
            }


            // 提示框外框样式及内容数据
            const htmlContent = `<div style="width: 180px; height: 65px;">
            <!-- 提示框顶部标题样式及数据 smsUseData.xAxis.date（标题数据）-->
            <div style="color: #000000D9; border-bottom: 1px solid #F0F0F0; padding: 5px 16px;">
                ${params[0].axisValueLabel}月
            </div>
            <div style="padding: 12px 16px; position: relative;">
              ${content}
            </div>
          </div>`;

            return htmlContent;
          },
          // 添加 $ 前缀
        },
        legend: {
          show: true,
          right: '2%',
          itemWidth: 7,
          itemHeight: 7,
          data: ['日销售数量', '本日销售数量'],
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: {
          show: true,
          type: 'category',
          name: "日",
          nameTextStyle: {
            color: "#fff"
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff'
          },
          data: xAxisData
        },
        yAxis: {
          type: 'value',
          name: "单位:吨",
          nameLocation: "middle",
          nameTextStyle: {
            color: '#fff'
          },
          axisLabel: {
            color: '#fff'
          },
          nameGap: 30,
          splitNumber: 3,
          nameRotate: -90,
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#30436D",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          max: function (value) {
            return value.max;
          }
        },
        series: [
          {
            // name: "今日废弃油脂",
            data: maxDataList,
            type: 'bar',
            barWidth: 18,
            itemStyle: {
              color: 'rgba(88, 184, 252, 0.1)'
            },
            barGap: '-78%',
          },
          {
            name: "日销售数量",
            data: currentDataList,
            type: 'bar',
            barWidth: 8,

            // showBackground: true,
            // backgroundStyle: {
            //   color: 'rgba(88, 184, 252, 0.1)'
            // }
          },

          {
            name: "本日销售数量",
            // data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            //   {
            //     value: 100,
              
            //   },],
            data:currentDataList,
            type: 'bar',
            barWidth: 8,
            // barGap: '-100%',
            // showBackground: true,
            // backgroundStyle: {
            //   color: 'rgba(88, 184, 252, 0.1)'
            // }
          },
        ]
      }

      chart = echarts.init(this.$refs.chart2)
      chart.setOption(initOptions)

      window.addEventListener("resize", function () {
        chart.resize();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-view {
  margin-top: 12px;
  width: 400px;
  height: 224px;
}
</style>